<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>

  <meta charset="utf-8">
  <title>学员案例</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
    .broad{
      margin-right: 10px;
    }
    .top_table {
      position: fixed;
      z-index: 100;
    }
    [lay-id=nav-c1] .layui-nav-child {
      position: relative;
      z-index: 9999;
      width: 100%;
      min-height: 50px;
      line-height: 30px;
      padding: 10px 15px;
      border-width: 0;
      border-bottom-width: 1px;
    }
    [lay-id=nav-c2] .layui-nav-child {
      position: relative;
      z-index: 9999;
      width: 100%;
      min-height: 50px;
      line-height: 30px;
      padding: 10px 15px;
      border-width: 0;
      border-bottom-width: 1px;
    }

  </style>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  </script>


</head>

<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>学员案例</legend>
</fieldset>
<form class="layui-form" action="/" method="get">
<ul class="layui-nav" style="color: #0C0C0C">
<!--  <li class="layui-nav-item" >-->
<!--    <a href="javascript:;">国家/地区</a>-->
<!--    <dl class="layui-nav-child" style="z-index:20000;">-->
<!--      <dd><a href="">意大利</a></dd>-->
<!--      <dd><a href="">香港</a></dd>-->
<!--      <dd><a href="">英国</a></dd>-->
<!--      <dd><a href="">新加坡</a></dd>-->
<!--      <dd><a href="">澳门</a></dd>-->
<!--    </dl>-->
<!--  </li>-->
<!--  <li class="layui-nav-item">-->
<!--    <a href="javascript:;">专业</a>-->
<!--    <dl class="layui-nav-child" style="z-index:20000;">-->
<!--      <dd><a href="">化工</a></dd>-->
<!--      <dd><a href="">法学</a></dd>-->
<!--      <dd><a href="">环境工程</a></dd>-->
<!--      <dd><a href="">教育学</a></dd>-->
<!--      <dd><a href="">经济</a></dd>-->
<!--      <dd><a href="">语言学</a></dd>-->
<!--    </dl>-->
<!--  </li>-->
  <li class="layui-nav-item broad">
    <div class="layui-inline">
      <div class="layui-input-inline">
        <select name="nation_area">
          <option value="" selected="selected">--请选择 国家/地区--</option>
          <option value="1">不限</option>
          <option value="2">意大利</option>
          <option value="3">英国</option>
          <option value="4">澳门</option>
          <option value="5">新加坡</option>
          <option value="6">upload</option>
          <option value="7">laydate</option>
          <option value="8">laypage</option>
          <option value="9">flow</option>
          <option value="10">util</option>
          <option value="11">code</option>
          <option value="12">tree</option>
          <option value="13">layedit</option>
          <option value="14">nav</option>
          <option value="15">tab</option>
          <option value="16">table</option>
          <option value="17">select</option>
          <option value="18">checkbox</option>
          <option value="19">switch</option>
          <option value="20">radio</option>
        </select>
      </div>
    </div>
  </li>

  <li class="layui-nav-item broad">

    <div class="layui-inline">
      <div class="layui-input-inline">
        <select name="major" lay-verify="required" >
          <option value="" selected="selected">--请选择 专业--</option>
          <option value="1">不限</option>
          <option value="2">化工</option>
          <option value="3">法学</option>
          <option value="4">环境工程</option>
          <option value="5">教育学</option>
          <option value="6">语言学</option>
          <option value="7">经济</option>
        </select>
      </div>
    </div>
  </li>

  <li class="layui-nav-item broad" >
   <input type="submit" class="layui-btn layui-btn-normal">
  </li>
<!--  <li class="layui-nav-item broad" >-->
<!--    <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
<!--  </li>-->
</ul>

</form>
<table class="layui-hide" id="demo" lay-filter="test"></table>

<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
  layui.use('element', function(){
    var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

    //监听导航点击
    element.on('nav(demo)', function(elem){
      //console.log(elem)
      layer.msg(elem.text());
    });
  });

  layui.use('table', function(){
    var table = layui.table;

    table.render({
      elem: '#demo'
      ,height: 750
      ,title: '数据表'
      ,page: true //开启分页
      ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
      ,url:'/data/selData'
      ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ,limit: 12
      ,limits : [ 12,15, 20, 30, 40 ]
      ,cols: [
              [
         {type: 'checkbox', fixed: 'left'}
        ,{field:'id', width:120, title: 'ID', sort: true}
        ,{field:'nation_area', width:80, title: '国家/地区'}
        ,{field:'undergraduate_college', width:120, title: '录取院校'}
        ,{field:'major', width:80, title: '专业'}
        ,{field:'major_categories', title: '专业大类', width:80} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
        ,{field:'enrollment_year', width:110, title: '入读年份', sort: true}
        ,{field:'content', width:80, title: '内容页'}
        ,{field:'student_name', width:120, title: '学生姓名'}
        ,{field:'college', width:140, title: '本科院校'}
        ,{field:'college_major', width:80, title: '本科专业'}
        ,{field:'gpa', width:80, title: 'gpa', sort: true}
        ,{field:'soft_background', width: '50%', minWidth: 100, title: '软背景'}
        ,{fixed: 'right', width: 80, align:'center', style: "height:111px;",toolbar: '#barDemo'}
      ]
      ]
    });

    //监听头工具栏事件
    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id)
              ,data = checkStatus.data; //获取选中的数据
      switch(obj.event){
        case 'add':
          layer.msg('添加');
          break;
        case 'update':
          if(data.length === 0){
            layer.msg('请选择一行');
          } else if(data.length > 1){
            layer.msg('只能同时编辑一个');
          } else {
            layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
          }
          break;
        case 'delete':
          if(data.length === 0){
            layer.msg('请选择一行');
          } else {
            layer.msg('删除');
          }
          break;
      };
    });

    //监听行工具事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data //获得当前行数据
              ,layEvent = obj.event; //获得 lay-event 对应的值
      if(layEvent === 'detail'){
        layer.msg('查看操作');
      } else if(layEvent === 'more'){
        //下拉菜单
        dropdown.render({
          elem: this //触发事件的 DOM 对象
          ,show: true //外部事件触发即显示
          ,data: [{
            title: '编辑'
            ,id: 'edit'
          },{
            title: '删除'
            ,id: 'del'
          }]
          ,click: function(menudata){
            if(menudata.id === 'del'){
              layer.confirm('真的删除行么', function(index){
                obj.del(); //删除对应行（tr）的DOM结构
                layer.close(index);
                //向服务端发送删除指令
              });
            } else if(menudata.id === 'edit'){
              layer.msg('编辑操作，当前行 ID:'+ data.id);
            }
          }
          ,align: 'right' //右对齐弹出（v2.6.8 新增）
          ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
        })
      }
    });

  });


</script>

</body>
</html>